<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>轮播图</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="描述内容">
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	</head>
	<body>		
		<style type="text/css">
		*{margin:0px; padding:0px; list-style-type:none; text-decoration:none;}
		div.randomChange{width:760px; height:300px; margin:0px auto 50px; position:relative; overflow:hidden;}
		ul.randomChange{width:100%; height:inherit; position:relative;}
		ul.randomChange li.con{width:100%; height:inherit; position:absolute; top:0px; left:0px; text-align:center; line-height:300px; font-size:32px;}
		ul.randomChange li.con div{width:100%; height:inherit;}
		ul.randomChangeBut{width:100%; position:absolute; bottom:0px; height:35px; text-align:center; z-index:5;}
		ul.randomChangeBut li{width:10px; height:10px; margin-right:5px; cursor:pointer; border:1px solid #ddd; display:inline-block;}
		ul.randomChangeBut li.liHover{background:cyan;}
		/**/
		div.randomChangeLeftRightBut{width:120px; height:60px; position:relative; margin:50px auto 20px;}
		a.randomChangeLeftRightBut{display:inline-block; width:40px; height:60px; text-align:center; line-height:60px; color:#fff; background:#C8C8C8; font-size:25px; color:#fff; font-weight:bold; position:absolute;}
		a.randomChangeLeftRightButLeft{left:0px;}
		a.randomChangeLeftRightButRight{right:0px;}
		/* changeButList */
		div.changeButList{width:560px; height:70px; margin:0px auto; text-align:center;}
		div.changeButList a{display:inline-block; width:50px; height:50px;}
		</style>
		<div class="randomChangeLeftRightBut">
			<a href="javascript:;" class='randomChangeLeftRightBut randomChangeLeftRightButLeft'>&lt;</a>
			<a href="javascript:;" class='randomChangeLeftRightBut randomChangeLeftRightButRight'>&gt;</a>
		</div>
		<div class='changeButList'>
			<a href='javascript:;' style='background:red;'></a>
			<a href='javascript:;' style='background:orange;'></a>
			<a href='javascript:;' style='background:yellow;'></a>
			<a href='javascript:;' style='background:green;'></a>
			<a href='javascript:;' style='background:cyan;'></a>
			<a href='javascript:;' style='background:blue;'></a>
			<a href='javascript:;' style='background:purple;'></a>
		</div>
		<div class="randomChange">			
			<ul class="randomChange">
				<li class='con'><div style='background:red;'></div></li>
				<li class='con'><div style='background:orange;'></div></li>
				<li class='con'><div style='background:yellow;'></div></li>
				<li class='con'><div style='background:green;'></div></li>
				<li class='con'><div style='background:cyan;'></div></li>
				<li class='con'><div style='background:blue;'></div></li>
				<li class='con'><div style='background:purple;'></div></li>
			</ul>
			<ul class="randomChangeBut"></ul>		
		</div>
	</body>	
	<script type="text/javascript">
	(function($){
		$.fn.extend({
			'randomChange':function(options){
				var opts = $.extend({},randomChange_defaluts,options);
				var $this  = $(this);
				$thisAll = $this.find('*');
				$thisButBox = $(opts.randomChangeBut);
				$thisButBoxAll = $thisButBox.find('*');
				$randomChangeLeftRightButLeft = $(opts.randomChangeLeftRightButLeft);
				$randomChangeLeftRightButRight = $(opts.randomChangeLeftRightButRight);
				opts.liWidth = $this.find('li').outerWidth(true);
				opts.liHeight = $this.find('li').outerHeight(true);
				opts.oldTime = new Date();
				opts.leftOldTime = new Date();
				opts.rightOldTime = new Date();
				var array = [
					{'top':'-'+opts.liHeight+'px'},
					{'left':''+opts.liWidth+'px'},
					{'top':''+opts.liHeight+'px'},
					{'left':'-'+opts.liWidth+'px'},
					{'top':'-'+opts.liHeight+'px','left':'-'+opts.liWidth+'px'},
					{'top':''+opts.liHeight+'px','left':''+opts.liWidth+'px'},
					{'top':''+opts.liHeight+'px','left':'-'+opts.liWidth+'px'},
					{'left':''+opts.liHeight+'px','top':'-'+opts.liWidth+'px'}
				];
				if(opts.fourDirection){
					var array = [
						{'top':'-'+opts.liHeight+'px'},
						{'left':''+opts.liWidth+'px'},
						{'top':''+opts.liHeight+'px'},
						{'left':'-'+opts.liWidth+'px'}
					];
				};
				if(opts.twoDirection){
					var array = [					
						{'left':'-'+opts.liWidth+'px'},
						{'left':''+opts.liWidth+'px'}
					];
					if(opts.ifupDownDirection){
						var array = [
							{'top':'-'+opts.liHeight+'px'},
							{'top':''+opts.liHeight+'px'}
						];
					};
				};
				$this.find('li.con:first').css({'z-index':'3'});
				opts.liSize = $this.find('li.con').size();
				for(var i=0; i<opts.liSize; ++i){opts.liStr += '<li></li>';};
				$thisButBox.html(opts.liStr);
				$thisButBox.find('li:first').addClass('liHover');
				$thisButBox.find('li').live('click',function(){					
					opts.newTime = new Date();
					opts.betweenTime = opts.newTime - opts.oldTime;
					if(opts.setClickBetweenTime){
						if(opts.betweenTime >= opts.clickBetweenTime){
							opts.liIndex = $(this).index();
							partCom();
						};
					}else{
						if(opts.betweenTime >= opts.animateTime){
							opts.liIndex = $(this).index();
							partCom();
						};
					};				
					opts.oldTime = opts.newTime;
				});
				$randomChangeLeftRightButRight.bind('click',function(){
					opts.rightNewTime = new Date();
					opts.betweenRightTime = opts.rightNewTime - opts.rightOldTime;
					if(opts.setClickBetweenTime){
						if(opts.betweenRightTime >= opts.clickBetweenTime){
							butRightPartCom();
						};
					}else{
						if(opts.betweenRightTime >= opts.animateTime){
							butRightPartCom();
						};
					};
					function butRightPartCom(){
						opts.liIndex++;
						opts.onClickRightFunction();
						opts.liIndex = opts.liIndex%opts.liSize;
						partCom();
					};					
					opts.rightOldTime = opts.rightNewTime;
				});
				$randomChangeLeftRightButLeft.bind('click',function(){					
					opts.leftNewTime = new Date();
					opts.betweenLeftTime = opts.leftNewTime - opts.leftOldTime;
					if(opts.setClickBetweenTime){
						if(opts.betweenLeftTime >= opts.clickBetweenTime){
							butLeftPartCom();
						};
					}else{
						if(opts.betweenLeftTime >= opts.animateTime){
							butLeftPartCom();
						};
					};
					function butLeftPartCom(){
						opts.liIndex--;
						opts.onClickLeftFunction();
						if(opts.liIndex == -1){opts.liIndex = opts.liSize-1};
						partCom();
					};					
					opts.leftOldTime = opts.leftNewTime;
				});
				if(opts.autoPlay){
					function autoPlay(){
						clearInterval(opts.timer);
						opts.timer = setInterval(function(){
							opts.liIndex++;
							opts.onClickRightFunction();
							opts.liIndex = opts.liIndex%opts.liSize; partCom();
						},opts.setInterValTime);
					};
					autoPlay();
					function clearIntervalFun(cleatIntervalObj){
						$(cleatIntervalObj).live('mouseover',function(){clearInterval(opts.timer);});
						$(cleatIntervalObj).live('mouseout',function(){autoPlay();});
					};
					clearIntervalFun($this);
					clearIntervalFun($thisAll);
					clearIntervalFun($thisButBox);
					clearIntervalFun($thisButBoxAll);
					clearIntervalFun($randomChangeLeftRightButRight);
					clearIntervalFun($randomChangeLeftRightButLeft);
				};
				function partCom(){
					opts.random = Math.floor(Math.random()*8);
					if(opts.fourDirection){opts.random = Math.floor(Math.random()*4);};
					if(opts.twoDirection){opts.random = Math.floor(Math.random()*2);};
					if(opts.oneDirection){opts.random = Math.floor(Math.random()*1);};
					$thisButBox.find('li').eq(opts.liIndex).addClass('liHover').siblings('li').removeClass('liHover');
					//opts.oFunction();
					$this.find('li.con').eq(opts.liClick).css({'z-index':'3'});
					$this.find('li.con').eq(opts.liIndex).css({'z-index':'2'});
					if(opts.liClick != opts.liIndex){
						$this.find('li.con').eq(opts.liClick).animate(array[opts.random],opts.animateTime,function(){
							$this.find('li.con').eq(opts.liClick).removeAttr("style");
							opts.liClick = opts.liIndex;
						});
					};
				};
			}
		});
		var randomChange_defaluts = {
			liSize:'',
			liIndex:'',
			liStr:'',
			liTop:'',
			liRight:'',
			liBottom:'',
			liLeft:'',
			oldTime:'',
			newTime:'',
			leftOldTime:'',
			leftNewTime:'',
			rightOldTime:'',
			rightNewTime:'',			
			betweenTime:'',
			betweenLeftTime:'',
			betweenRightTime:'',
			timer:null,
			autoPlay:true,
			liWidth:'',
			liHeight:'',
			fourDirection:false,
			twoDirection:false,
			ifupDownDirection:false,
			oneDirection:false,
			animateTime:500,
			setInterValTime:2000,
			setClickBetweenTime:false,
			clickBetweenTime:100,
			random:'',
			liClick:0,			
			randomChangeBut:'ul.randomChangeBut',
			randomChangeLeftRightButLeft:'',
			randomChangeLeftRightButRight:'',
			onClickRightFunction:function(){},
			onClickLeftFunction:function(){},
			oFunction:function(){}
		};
	}(window.jQuery));
	var oIndex = 0;
	var liSize = $('ul.randomChange>li').size();
	$('ul.randomChange').randomChange({
		autoPlay:false,//是否自动切换 默认true
		fourDirection:false,//是否四个方向切换 默认false表示八个方向
		twoDirection:false,//是否两个方向切换 默认为false		
		ifupDownDirection:false,//是否上下两个方向切换 只有当twoDirection:true才有效，默认false 左右两个方向切换
		oneDirection:false,//是否一个方向移动，只有当twoDirection:true才有效， 左右切换默认是向左，左右切换默认是向上
		animateTime:500,
		setInterValTime:2000,
		setClickBetweenTime:false,//是否设置点击间隔时间,默认false,false表示默认点击时间间隔为animateTime
		clickBetweenTime:100,//只有当设置点击时间为true时才有效
		randomChangeBut:'ul.randomChangeBut',
		randomChangeLeftRightButLeft:'a.randomChangeLeftRightButLeft',
		randomChangeLeftRightButRight:'a.randomChangeLeftRightButRight',
		onClickRightFunction:function(){
			oIndex++;
			oIndex = oIndex%liSize;
		},
		onClickLeftFunction:function(){
			oIndex--;
			if(oIndex ==-1){oIndex = liSize-1};
		}
	});
	$('ul.randomChangeBut>li').click(function(){
		oIndex = $(this).index();
		console.log(oIndex);
	});
	//changeButList
	var ButListIndex = '';
	var ButListSize = $('div.changeButList>a').size();
	$('div.changeButList>a').click(function(){
		ButListIndex = $(this).index();
		$('ul.randomChangeBut>li').eq(ButListIndex).trigger('click');
		console.log(ButListIndex);
	});
	</script>
	<!-- <script type="text/javascript">
		$(document).ready(function(){
			var click = 0;
			var num = 0;
			var index0 = 0;
			var timer = null;
			var arr = [
				{"top":"-300px"},
				{"left":"760px"},
				{"top":"300px"},
				{"left":"-760px"},
				{"top":"-300px","left":"-760px"},
				{"top":"300px","left":"760px"},
				{"top":"300px","left":"-760px"},
				{"left":"760px","top":"-300px"}
			];
			
			$("#main img").eq(0).css("z-index","3");
			$("#but li").click(function(){
				index0 = $(this).index();
				com();
			});
			//自动轮播开始
			function auto(){
				timer = setInterval(function(){
					index0++;
					if(index0>3){index0 = 0;}
					if(index0<4){com();}else{index0 =-1;};
				},1500);
			};
			auto();
			//自动轮播结束
			//鼠标滑动开始
			$("#mian").hover(function(){clearInterval(timer);},function(){auto();});
			//鼠标滑动结束
			//重复部分开始
			function com(){
				var sjs = Math.floor(Math.random()*8);
				$("#but li").eq(index0).addClass("hover").siblings().removeClass("hover");
				$("#main img").eq(click).css("z-index","3");
				$("#main img").eq(index0).css("z-index","2");
				if(click == index0){}else{
					$("#main img").eq(click).animate(arr[sjs],500,function(){
						$("#main img").eq(click).removeAttr("style");
						click=index0;
					});
				}
			};
			com();
			//重复部分结束
		});
	</script> -->
</html>